<!-- 监室点名详情 -->
<template>
  <div class="room-persons">
    <el-scrollbar :height="height" v-loading="loading">
      <div class="persons-wrap" v-if="list.length > 0">
        <div class="person" :style="{ cursor: selectable ? 'pointer' : '' }" v-for="(item, index) in list" :key="index" @click="select(item)">
          <div class="name flex-center" :class="{ fail: item.bdjg == '失败' }">
            {{ item.xm }}
          </div>
          <div class="box">
            <img class="photo" :src="item.zpurl + (item.zpurl.includes('?') ? '&token=' : '?token=') + useStore.token" />
            <div class="result" v-if="item.bdjg == '成功'">
              <el-result icon="success" :title="item.bdjg"> </el-result>
            </div>
            <div class="check-fail" v-else-if="item.bdjg && item.bdjg != '成功'">
              <template v-if="item.bdtpurl">
                <span>{{ item.bdjg }}</span>
                <img class="result-photo" :src="item.bdtpurl" />
              </template>

              <el-result v-else icon="error" :title="item.bdjg"> </el-result>
            </div>
            <div class="waiting" v-else-if="!item.bdjg">
              <div><i class="iconfont icon-dengdai"></i></div>
              <!-- <span v-if="showWaiting"> 等待比对</span> -->
            </div>
          </div>
          <label v-if="item.selected" class="selected-label flex-center"
            ><el-icon color="#fff"><Select /></el-icon
          ></label>
        </div>
      </div>
      <CustomEmpty v-else :height="height" style="margin-top: 10rem"></CustomEmpty>
    </el-scrollbar>
  </div>
</template>

<script setup name="Persons">
import { ref, onBeforeMount, onMounted, computed, watch, onBeforeUnmount } from 'vue'
import { http } from '@/utils/index.js'
import { ElMessage, ElMessageBox } from 'element-plus'
import { stores } from '@/stores/index.js'

const useStore = stores.useUserStore()
const list = defineModel('list', { default: [] })
const loading = ref(false)
const props = defineProps({
  selectable: {
    type: Boolean,
    defalut: false
  },
  height: {
    type: [String],
    defalut: '770rem'
  },
  list: {
    type: Array,
    defalut: () => {
      return []
    }
  },
  showWaiting: {
    type: Boolean,
    defalut: true
  }
})
const form = ref({
  jsh: ''
})

const option = ref({})

onMounted(() => {})
const select = (person) => {
  if (!props.selectable) return
  person.selected = !person.selected
}
</script>
<style lang="scss" scoped>
.room-persons {
  border: var(--el-border);
  // margin: 10px;
  padding: 12px;
  border-radius: 4px;
  font-size: 18px;
  ::v-deep(.custom-search) {
    .search-btn {
      grid-area: 1 / 2 / span 1 / span 3;
    }
  }
  .icon-quanxuan,
  .icon-kaishi1 {
    margin-right: 4px;
  }

  .persons-wrap {
    // border: 2px solid var(--el-border-color);
    // padding: 15px;
    // padding: 15px 15px;
    margin-right: 10px;
    min-height: 770px;
    background-color: #fff;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-auto-rows: 220px;
    gap: 10px;

    border-radius: 4px;
    .person {
      position: relative;
      border: var(--el-border);
      border-radius: 4px;

      overflow: hidden;
      .name {
        height: 50px;
        font-size: 20px;
        font-weight: 700;
        background: linear-gradient(90deg, var(--el-color-primary-light-9), rgba(158, 177, 242, 0.108) 99%);
        user-select: none;
        &.fail {
          background: #ea0000;
          color: #fff;
        }
      }
      .box {
        padding: 15px 22px;
        height: calc(100% - 50px);
        display: flex;
        justify-content: space-between;
        .result {
          padding: 0;
          // flex: 1;
        }
        ::v-deep(.el-result) {
          width: 150px;
          height: 100%;
          svg {
            width: 55px;
          }
          .el-result__title p {
            font-size: 18px;
          }
        }
        img {
          width: 105px;
        }
        .check-fail {
          position: relative;
          // background: #ea0000;
          color: #fff;

          img {
            height: 87%;
          }
          span {
            position: absolute;
            bottom: -11px;
            left: 50%;
            color: #ea0000;
            white-space: nowrap;
            font-size: 18px;
            transform: translateX(-50%);
          }
        }
        .waiting {
          width: 150px;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          i {
            margin-bottom: 10px;
            font-size: 50px;
            color: var(--el-color-primary);
          }
        }
      }

      &:hover {
        box-shadow: 0 0 10px var(--el-color-primary-light-5);
      }
      .selected-label {
        position: absolute;
        right: -15px;
        top: -6px;
        width: 40px;
        height: 24px;
        background: var(--el-color-primary);
        text-align: center;
        transform: rotate(45deg);
        .el-icon {
          font-size: 12px;
          margin-top: 11px;
          transform: rotate(-45deg);
        }
      }
    }
  }
}
</style>
